<template>
	
		<view id="wmswiper" class="wormjan-swiper"  :style="container_style">
			<!-- <view id="index" class="item" v-for="(item, index) in lists" :key="index" :style="style"
				@click="itemClick(item)">
				{{ item.title }}
			</view> -->
			<swiper class="swiper" :disable-touch="true" circular vertical :interval="duration" :autoplay="autoplay">
				<swiper-item v-for="(item, index) in lists" :key="index">
					<view class="item">
						{{ item.title }}
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item> -->
			</swiper>


		</view>
	
</template>
<script>
export default {
	name: "wormjan-swiper",
	props: {
		//数据列表
		lists: {
			type: Array,
			default() {
				return []
			}
		},
		//容器高度，行高
		height: {
			type: String,
			default() {
				return "36";
			}
		},
		//容器背景色
		backColor: {
			type: String,
			default() {
				return '#fff';
			}
		},
		//字色
		color: {
			type: String,
			default() {
				return "#555";
			}
		},
		//停顿时长，即多长时间后开始滚动,以及滚到头后多久换下一个公告
		intval_1: {
			type: String,
			default() {
				return "1000";
			}
		},
		//滚动速度,越大越慢
		intval_2: {
			type: String,
			default() {
				return "20";
			}
		},
	},
	data() {
		return {
			style: '',
			objIndex: 0,
			objCount: 0,
			containerWidth: 0,		//容器宽度
			left: 0,
			top: 0,
			leftInterval: null,
			colInterval: null,
			container_style: '',
			autoplay:true,
			duration:20000
		}
	},
	mounted() {
		this.container_style = "height:" + this.height + "px;line-height:" + this.height + "px;background:" + this.backColor + ';color:' + this.color;
		// this.execswip();
	},

	methods: {
		// execswip() {
		// 	const that = this;
		// 	uni.createSelectorQuery().in(this).select("#wmswiper").fields({
		// 		size: true,
		// 	}, data => {
		// 		this.containerWidth = data.width;
		// 	}).exec();
		// 	let view = uni.createSelectorQuery().in(this).selectAll(".item");
		// 	view.fields({
		// 		size: true,
		// 	}, data => {
		// 		for (let i = 0; i < data.length; i++) {
		// 			that.lists[i].width = data[i].width
		// 		}
		// 		that.objCount = data.length;
		// 	}).exec();

		// 	setTimeout(function () {
		// 		that.start_interval()
		// 	}, this.intval_1)
		// },
		// clear_interval() {
		// 	clearInterval(this.leftInterval)
		// },
		// clear_colInterval() {
		// 	clearInterval(this.colInterval)
		// },
		// start_interval() {
		// 	if (this.objCount == 0) {
		// 		this.clear_interval();
		// 		this.execswip();
		// 		return;
		// 	}

		// 	const that = this;
		// 	this.leftInterval = setInterval(function () {
		// 		that.left--;
		// 		if (that.left > that.containerWidth - that.lists[that.objIndex].width) {
		// 			that.top = (that.objIndex * -1 * that.height)
		// 			that.style = "left:" + that.left + 'px;top:' + that.top + 'px';
		// 		} else {
		// 			that.clear_interval();
		// 			setTimeout(function () {
		// 				if (that.objIndex < that.objCount - 1) {
		// 					that.objIndex++;
		// 				} else {
		// 					that.objIndex = 0;
		// 				}
		// 				that.left = 0;
		// 				that.start_colInterval()
		// 			}, that.intval_1)
		// 		}
		// 	}, this.intval_2)
		// },
		// start_colInterval() {
		// 	const that = this;
		// 	if (this.objCount == 0) {
		// 		this.clear_colInterval();
		// 		return;
		// 	}
		// 	if (this.objIndex <= this.objCount - 1) {
		// 		this.colInterval = setInterval(function () {
		// 			that.left = 0;
		// 			if (that.top > that.objIndex * -1 * that.height) {
		// 				that.top--;
		// 				that.style = "left:" + that.left + 'px;top:' + (that.top) + 'px';
		// 			} else {
		// 				//向上滚完
		// 				that.clear_colInterval();
		// 				that.left = 0;
		// 				that.top = that.objIndex * -1 * that.height
		// 				that.style = "left:" + that.left + 'px;top:' + (that.top) + 'px';
		// 				setTimeout(function () {
		// 					that.start_interval()
		// 				}, that.intval_1)
		// 			}
		// 		}, this.intval_2)
		// 	}
		// },
		// itemClick(item) {
		// 	this.$emit("click", item);
		// }
	}
}
</script>
<style lang="scss" scoped>
.wormjan-swiper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.swiper{
	width: 100%;
	height: 100%;
}

.item {
	white-space: nowrap;
	position: relative;
	overflow-x: visible;
	width: fit-content;
	padding: 0 5px;
	font-size: 28rpx;
}
</style>